<template>
  <div>
    <!-- 外部链接 -->
    <a 
      v-if="isExternal" 
      :href="to" 
      target="_blank" 
      rel="noopener noreferrer"
    >
      <slot />
    </a>
    <!-- 内部路由链接 -->
    <router-link 
      v-else 
      :to="to"
    >
      <slot />
    </router-link>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  to: string
}

const props = defineProps<Props>()

// 是否为外部链接
const isExternal = computed(() => {
  return /^(https?:|mailto:|tel:)/.test(props.to)
})
</script>

<style scoped></style>
